Skip to content

NextJS: Fix default next image loader when src has params#24187

Merged
valentinpalkovic merged 6 commits into
storybookjs:nextfrom
json-betsec:fix-next-image-search-params
Oct 5, 2023
Merged

NextJS: Fix default next image loader when src has params#24187
valentinpalkovic merged 6 commits into
storybookjs:nextfrom
json-betsec:fix-next-image-search-params

Conversation

@json-betsec
Copy link
Copy Markdown
Contributor

Closes #24104

What I did

This PR fixes a bug in @storybook/nextjs which malforms URLs with search parameters in them given to next/image.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Couldn't find any existing tests to add to.

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

  1. Create a new NextJS storybook
  2. Add a component that uses next/image with a url that specifies query parameters
  3. Observe that the image loads because the URL is no longer malformed

Documentation

No documentation updates were needed.

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

  • Make sure this PR contains one of the labels below:

    Available labels
    • bug: Internal changes that fixes incorrect behavior.
    • maintenance: User-facing maintenance tasks.
    • dependencies: Upgrading (sometimes downgrading) dependencies.
    • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
    • cleanup: Minor cleanup style change. Will not show up in release changelog.
    • documentation: Documentation only changes. Will not show up in release changelog.
    • feature request: Introducing a new feature.
    • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
    • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Comment thread code/frameworks/nextjs/src/images/next-image-default-loader.tsx Outdated
@kasperpeulen kasperpeulen added bug ci:normal Run our default set of CI jobs (choose this for most PRs). labels Sep 15, 2023
@ndelangen ndelangen changed the title Fix default next image loader when src has params NextJS: Fix default next image loader when src has params Sep 19, 2023
@ndelangen
Copy link
Copy Markdown
Member

@json-betsec did you do the manual test yourself?

Could you do a final pass/check before I merge this?

What do you think the risk of the PR is?
We could ship this as part of 7.5?

@json-betsec
Copy link
Copy Markdown
Contributor Author

Could you do a final pass/check before I merge this?

I did a final check and this PR is good to go

What do you think the risk of the PR is?

I think this PR is very low risk

Could we ship this as part of 7.5?

Absolutely!

NOTE: I do think this file could just be:

import type * as _NextImage from 'next/image';

export const defaultLoader = ({ src }: _NextImage.ImageLoaderProps) => {
  return src;
};

Which could be considered, but hey, to make this release, this PR can be good to merge too!

@yannbf yannbf mentioned this pull request Oct 17, 2023
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug ci:normal Run our default set of CI jobs (choose this for most PRs). nextjs

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: @storybook/nextjs next-image query parameters breaks images

6 participants